<template>
  <!-- 隐患处理 -->
  <view>
    <view v-for="(item, index) in data" :key="index" class="grid-body">
      <view class="check grid-common">
        <view class="title flex items-center justify-between">
          <view class="task-status">
            <image
              class="icon-style"
              v-if="item.checkStatus == 0"
              src="/static/images/check_status_icon2.png"
              mode="aspectFill"
            ></image>
            <image
              class="icon-style"
              v-if="item.checkStatus == 1"
              src="/static/images/check_status_icon1.png"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <view class="flex text">
          风险区域：
          <text>{{ item.areaName }}</text>
        </view>
        <view class="flex text">
          分析单元类型：
          <text>{{ item.riskUnitTypeLabel }}</text>
        </view>
        <view class="flex text">
          风险分析单元：
          <text>{{ item.riskUnitName }}</text>
        </view>
        <view class="flex text" style="word-wrap: break-word">
          排查内容：
          <text>{{ item.investigationDesc }}</text>
        </view>
        <view class="flex text">
          排查人员：
          <text>{{ item.planCheckUser }}</text>
        </view>
        <view class="flex text">
          实际排查时间：
          <uni-dateformat :date="item.actualCheckTime" format="yyyy/MM/dd hh:mm"></uni-dateformat>
        </view>
        <view class="footer-wrap">
          <view class="content-wrap"> 排查周期：{{ `${item.planCheckPeriod}${item.periodUnitLabel}` }} </view>
          <view class="button-wrap">
            <view class="button" @click="onHandle(item)"> 查看 </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
export default {
  name: 'record',
  components: {
    Empty
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      textColor: true,
      listData: [],
      pageNum: 1,
      total: null
    }
  },

  methods: {
    styleSelector(option) {
      return 'level_' + option
    },
    onHandle(item) {
      uni.navigateTo({
        url: '/pages/work/controlCheck/record-detail?planTaskId=' + item.planTaskId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-body {
  margin-top: 24rpx;
  &:last-child {
    margin-bottom: 24rpx;
  }
}
.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    position: relative;

    .task-status {
      position: absolute;
      top: 10rpx;
      right: 0;

      .icon-style {
        width: 100rpx;
        height: 88rpx;
      }
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    line-height: 40rpx;
    color: #999;

    text {
      width: 62%;
      color: #333;
      display: inline-block;
    }

    .bg-select {
      display: inline-block;
      margin-left: 5px;

      i {
        display: inline-block;
        font-style: normal;
        margin-right: 5px;
      }

      &.level_1 {
        color: #a14430;
      }

      &.level_2 {
        color: #c87c32;
      }

      &.level_3 {
        color: #c4c088;
      }

      &.level_4 {
        color: #88b4c4;
      }
    }

    .text-right {
      width: 76%;
      text-align: left;
      // height: 76rpx;
      overflow: hidden;
    }

    .text-right1 {
      width: 68%;
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .deal-btn {
    width: 22vw;
  }

  .report-btn {
    width: 36vw;
  }

  .bor-top {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
